<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Cover - UIkit tests</title>
        <script src="js/test.js"></script>
        <style>

            .test-height { height: 300px; }

        </style>
    </head>

    <body>

        <div class="uk-container">

            <h1>Cover</h1>

            <h2>Fixed Height</h2>

            <div class="uk-child-width-1-2@m" uk-grid>
                <div>

                    <h3>Image</h3>

                    <div class="test-height uk-cover-container uk-light">
                        <img src="images/photo.jpg" alt="" uk-cover>
                        <div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
                            <h1>Heading</h1>
                        </div>
                    </div>

                </div>
                <div>

                    <h3>Video</h3>

                    <div class="test-height uk-cover-container uk-light">
                        <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" playsinline loop muted uk-cover></video>
                        <div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
                            <h1>Heading</h1>
                        </div>
                    </div>

                </div>
                <div>

                    <h3>Iframe (YouTube)</h3>

                    <div class="test-height uk-cover-container uk-light">
                        <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?playsinline=1&amp;rel=0&amp;controls=0&amp;loop=1&amp;mute=1" width="1920" height="1080" allowfullscreen uk-cover></iframe>
                        <div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
                            <h1>Heading</h1>
                        </div>
                    </div>

                </div>
                <div>

                    <h3>Iframe (Vimeo)</h3>

                    <div class="test-height uk-cover-container uk-light">
                        <iframe src="https://player.vimeo.com/video/1084537?title=0&amp;background=1&amp;keyboard=0&amp;muted=1" width="500" height="281" allowfullscreen uk-cover></iframe>
                        <div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
                            <h1>Heading</h1>
                        </div>
                    </div>

                </div>
            </div>

            <h2>Responsive Height</h2>

            <div class="uk-child-width-1-2@m" uk-grid>
                <div>

                    <h3>Video (JS)</h3>

                    <div class="uk-cover-container uk-light">
                        <canvas width="600" height="400"></canvas>
                        <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4?test2" playsinline loop muted uk-cover></video>
                        <div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
                            <h1>Heading</h1>
                        </div>
                    </div>

                </div>
                <div>

                    <h3>Iframe (YouTube)</h3>

                    <div class="uk-cover-container uk-light">
                        <canvas width="600" height="400"></canvas>
                        <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?playsinline=1&amp;rel=0&amp;controls=0&amp;loop=1&amp;mute=1" width="1920" height="1080" allowfullscreen uk-cover></iframe>
                        <div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
                            <h1>Heading</h1>
                        </div>
                    </div>

                </div>
            </div>

            <h2>Viewport Height</h2>

            <div class="uk-child-width-1-2@m" uk-grid>
                <div>

                    <h3>Video (JS)</h3>

                    <div class="uk-cover-container uk-light" uk-height-viewport>
                        <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4?test3" playsinline loop muted uk-cover></video>
                        <div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
                            <h1>Heading</h1>
                        </div>
                    </div>

                </div>
                <div>

                    <h3>Iframe (YouTube)</h3>

                    <div class="uk-cover-container uk-light" uk-height-viewport>
                        <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?playsinline=1&amp;rel=0&amp;controls=0&amp;loop=1&amp;mute=1" width="1920" height="1080" allowfullscreen uk-cover></iframe>
                        <div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
                            <h1>Heading</h1>
                        </div>
                    </div>

                </div>
            </div>

            <h2>JavaScript Options</h2>

            <div class="uk-overflow-auto">
                <table class="uk-table uk-table-striped">
                    <thead>
                        <tr>
                            <th>Option</th>
                            <th>Value</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><code>width</code></td>
                            <td>Number</td>
                            <td></td>
                            <td>The element's width.</td>
                        </tr>
                        <tr>
                            <td><code>height</code></td>
                            <td>Number</td>
                            <td></td>
                            <td>The element's height.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

        </div>

    </body>
</html>
